<template>
  <div class="app-container min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="fixed top-0 w-full bg-white z-50 shadow-sm transition-all duration-300" :class="{ 'nav-scrolled': isScrolled }">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-20">
          <!-- Logo部分 -->
          <div class="flex items-center">
            <router-link to="/" class="flex items-center space-x-3">
              <img src="/images/logo.png" alt="西安力望电子科技有限公司" class="h-16 w-auto" />
              <span class="text-xl font-bold text-gray-900">西安力望电子科技有限公司</span>
            </router-link>
          </div>

          <!-- 桌面端导航菜单 -->
          <div class="hidden lg:flex items-center space-x-8">
            <router-link 
              v-for="item in menuItems" 
              :key="item.path"
              :to="item.path"
              class="nav-link text-base font-medium transition-colors duration-200"
              :class="{ 'text-red-600': isCurrentPath(item.path) }"
            >
              {{ item.name }}
            </router-link>
          </div>

          <!-- 联系电话 -->
          <div class="hidden lg:flex items-center space-x-4">
            <div class="flex items-center space-x-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
              </svg>
              <a href="tel:029-88776655" class="text-red-600 font-medium hover:text-red-700">
                029-88776655
              </a>
            </div>
          </div>

          <!-- 移动端菜单按钮 -->
          <div class="lg:hidden">
            <button @click="toggleMobileMenu" class="p-2 rounded-md text-gray-600 hover:text-red-600 focus:outline-none">
              <svg v-if="!isMobileMenuOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <transition
        enter-active-class="transition duration-200 ease-out"
        enter-from-class="transform -translate-y-full opacity-0"
        enter-to-class="transform translate-y-0 opacity-100"
        leave-active-class="transition duration-200 ease-in"
        leave-from-class="transform translate-y-0 opacity-100"
        leave-to-class="transform -translate-y-full opacity-0"
      >
        <div v-if="isMobileMenuOpen" class="lg:hidden bg-white border-t shadow-lg">
          <div class="container mx-auto px-4 py-4 space-y-4">
            <router-link 
              v-for="item in menuItems" 
              :key="item.path"
              :to="item.path"
              class="block py-2 text-base font-medium text-gray-900 hover:text-red-600"
              :class="{ 'text-red-600': isCurrentPath(item.path) }"
              @click="closeMobileMenu"
            >
              {{ item.name }}
            </router-link>
            <div class="pt-4 border-t">
              <a href="tel:029-88776655" class="flex items-center space-x-2 text-red-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                </svg>
                <span>029-88776655</span>
              </a>
            </div>
          </div>
        </div>
      </transition>
    </nav>

    <!-- 主要内容区域 -->
    <main class="flex-grow pt-20">
      <router-view v-slot="{ Component }">
        <transition 
          name="page" 
          mode="out-in"
          @before-leave="beforePageLeave"
          @enter="onPageEnter"
        >
          <component :is="Component" />
        </transition>
      </router-view>
    </main>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import Footer from './components/Footer.vue'

// 导航菜单数据
const menuItems = [
  { name: '首页', path: '/' },
  { name: '解决方案', path: '/solutions' },
  { name: '客户案例', path: '/cases' },
  { name: '新闻资讯', path: '/news' },
  { name: '关于我们', path: '/about' },
  { name: '在线咨询', path: '/consult' }
]

// 页脚数据
const footerData = [
  {
    title: '解决方案',
    items: [
      { title: 'AI智能决策', link: '/solutions/ai' },
      { title: 'LLM应用平台', link: '/solutions/llm' },
      { title: '智能数据分析', link: '/solutions/analysis' },
      { title: '计算机视觉', link: '/solutions/vision' }
    ]
  },
  {
    title: '新闻资讯',
    items: [
      { title: '公司动态', link: '/news/company' },
      { title: '行业资讯', link: '/news/industry' },
      { title: '技术前沿', link: '/news/tech' }
    ]
  },
  {
    title: '关于我们',
    items: [
      { title: '公司介绍', link: '/about' },
      { title: '发展历程', link: '/about/history' },
      { title: '联系我们', link: '/about/contact' }
    ]
  }
]

// 公司信息
const companyInfo = {
  name: '西安力望电子科技有限公司',
  phone: '029-88776655',
  email: 'contact@liwang.com',
  qrcode: '/images/qrcode.jpg'
}

// 控制移动端菜单
const isMobileMenuOpen = ref(false)
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

// 控制导航栏滚动效果
const isScrolled = ref(false)
const handleScroll = () => {
  isScrolled.value = window.scrollY > 0
}

// 页面切换动画
const beforePageLeave = (el) => {
  window.scrollTo(0, 0)
}

const onPageEnter = (el) => {
  el.style.opacity = 0
  setTimeout(() => {
    el.style.opacity = 1
  }, 50)
}

// 判断当前路由
const route = useRoute()
const isCurrentPath = (path) => {
  return route.path === path || route.path.startsWith(path + '/')
}

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style>
/* 导航链接样式 */
.nav-link {
  @apply text-gray-700 hover:text-red-600 transition-colors relative;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-red-600 transition-all duration-300;
}

.nav-link:hover::after,
.nav-link.text-red-600::after {
  @apply w-full;
}

/* 导航栏滚动效果 */
.nav-scrolled {
  @apply shadow-md bg-white/95 backdrop-blur-sm;
}

/* 页面切换动画 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

/* 移动端菜单动画 */
.mobile-menu-enter-active,
.mobile-menu-leave-active {
  transition: all 0.3s ease-out;
}

.mobile-menu-enter-from,
.mobile-menu-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>

